<template>
  <div class="afterInvest-detailsPage-chunk2 chunk">
    <div class="card">
      <div class="left">
        <chart1 v-if="compositionId&&Object.keys(contrastOptions_obj).length" id="chart1" :ids="compositionId"
        :id_index="id_index" :dates="dates" :contrastOptions_obj="contrastOptions_obj" :height="400" width="100%" />
      </div>
      <div class="right">
        <el-table
          v-loading="listLoading1"
          :data="list"
          fit
          max-height="380"
          size="mini"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column prop="investName" label="子投资" min-width="160" fixed show-overflow-tooltip>
            <!-- <template slot-scope="{row}">
              <span v-if="row&&row.hasNetworth&&row.investStarttime" style="cursor: pointer;" v-afterStrategy="{id: row.investId, userId, compositionId}">{{ row.investName }}</span>
              <span v-else style="cursor: pointer;color: #999;" @click="$message('该子投资无投后净值')">{{ row.investName }}</span>
            </template> -->
            <template slot-scope="{row}">
              <span v-if="row.networthValue" style="cursor: pointer;color: #1890ff;" @click.stop="groupDeltailHandle(row.investId)">{{ row.investName }}</span>
              <span v-else style="cursor: pointer;color: #666;" @click.stop="$message('该子投资净值不存在，无法查看详情')">{{ row.investName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="investStrategyName" label="策略名称" min-width="160" fixed show-overflow-tooltip></el-table-column>
          <el-table-column prop="currentEquity" label="资产金额（万元）" min-width="120" align="center"></el-table-column>
          <el-table-column prop="currentShare" label="资产份额" min-width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="networthValue" label="最新净值" min-width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="incomeRate" label="收益率" min-width="120" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.incomeRate" :class="scope.row.incomeRate>0?'positiveFc':'negativeFc'">{{ scope.row.incomeRate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="networthTime" label="交易日期" min-width="100" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.networthTime | parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="height: 150px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryAllSubInvestsByCompositionId } from '@/api/afterInvest'
import chart1 from '@/components/Charts/afterInvest/afterInvest_1.vue'

export default {
  components: { chart1 },
  props: {
    dates: {
      type: Array,
      default: () => {
        return []
      }
    },
    id_index: {
      type: Array,
      default: () => {
        return []
      }
    },
    contrastOptions_obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    listLoading1: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      compositionId: '',
      list: []
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.compositionId = this.$route.params && this.$route.params.id
    this.queryAllSubInvestsByCompositionId(this.compositionId)
  },
  methods: {
    groupDeltailHandle(id) {
      this.$router.push({
        path: `/afterManage/subInvest/details/${id}`,
        query: {
          userId: this.userId
        }
      })
    },
    queryAllSubInvestsByCompositionId(compositionId) {
      queryAllSubInvestsByCompositionId({
        compositionId
      }).then(res => {
        this.list = res.body
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .afterInvest-detailsPage-chunk2 {
  // .card {
  //   display: flex;
  //   background: #FFF;
  //   padding: 12px 24px;
  //   border-radius: 4px;
  //   .left { width: 55%; }
  //   .right { width: 45%; }
  // }
// }
</style>

